define(['backbone', 'libs/store.min', 'utils/dateUtil'], function(Backbone, Store) {
	var view = Backbone.View.extend({
		el: '#TOP',
		events: {
			'click span[role=logout]': 'logout',
			'click .cutmode > i': 'cutMode' //颜色风格切换
		},
		initialize: function() {
			var Tpl = '<span role="hello"></span><span role="time"></span><span role="logout"><i class="glyphicon glyphicon-off"></i>注 销</span>';
			$(this.el).find('.user').html(Tpl);
			$(this.el).undelegate();
			this.render();

		},
		cutMode: function(e) {
			var $target = $(e.currentTarget),
				mode = $target.attr('role'),
				isCur = $target.hasClass('cur');
			if (isCur) {
				return;
			} else {
				$('body').attr('mode', mode);
				$target.addClass('cur').siblings().removeClass('cur');			
				Store.set("color", mode);
			}
		},
		render: function() {
			this.renderHello();
			this.renderTime();
			this.renderColor();
		},
		renderColor: function() {
			var color = Store.get('color'); //获取颜色风格
			if (color) {
				$('body').attr('mode', color);
				$('.cutmode').find('i[role='+color+']').addClass('cur').siblings().removeClass('cur');
			} else {
				$('body').attr('mode', 'default');
			}
		},
		renderHello: function() {
			var user = userInfo.uname,
				$user = $(this.el).find('.user');
			$user.find('span[role=hello]').html('你好，' + user);
		},
		renderTime: function() {
			var timeTpl = $(this.el).find('.user').find('span[role=time]'),
				rendtimeTpl = function() {
					var curDate = new Date().toFormat('MM月DD日'),
						curWeek = new Date().pattern("EEE"),
						curTime = new Date().toFormat('PPHH:MI:SS'),
						curHtml = '今天是 ' + curDate + ' ' + curWeek + ' ' + curTime;
					timeTpl.html(curHtml)
				};
			rendtimeTpl();
			var timeInterval = setInterval(function() {
				rendtimeTpl();
			}, 500);
		},
		/*注销*/
		logout: function() {
			window.location = adminPath+ '/index/logout';
		}
	})
	return view;
})